<template>
  <!-- vueCropper 剪裁图片实现-->
  <el-dialog
    title="图片剪裁"
    :visible.sync="dialogVisible"
    class="crop-dialog"
    append-to-body
  >
    <div class="cropper-content">
      <div class="cropper" style="text-align: center">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="option.fixedBox"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          @cropMoving="cropMoving"
        />
      </div>
    </div>
    <div class="action-box">
      <el-upload
        class="upload-demo"
        action=""
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handleChangeUpload"
      >
        <el-button type="primary" plain>更换图片</el-button>
      </el-upload>
      <!-- <div v-if="isPreview"><img :src="previewImg" alt="" /></div> -->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="finish" :loading="loading"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { VueCropper } from "vue-cropper";
import { upload } from "@/api/upload";
export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      smode: "one",
      isPreview: false,
      dialogVisible: false,
      previewImg: "", // 预览图片地址
      // 裁剪组件的基础配置option
      option: {
        img: "https://pic1.zhimg.com/80/v2-366c0aeae2b4050fa2fcbfc09c74aad4_720w.jpg", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        canMoveBox: true, // 截图框能否拖动
        autoCropWidth: 375, // 默认生成截图框宽度
        autoCropHeight: 330, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [375, 330], // 截图框的宽高比例
        full: false, // 是否输出原图比例的截图
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        maxImgSize: 375, // 限制图片最大宽度和高度
        mode: "container", // 图片默认渲染方式
      },
      // 防止重复提交
      loading: false,
    };
  },
  methods: {
    cropMoving() {
      // 在这里处理 cropMoving 事件
      console.log("Crop is moving");
    },
    close() {
      // 实现关闭对话框的逻辑
      this.Visible = false;
    },
    async uploadImage(blob) {
      // 创建表单数据对象
      const formData = new FormData();
      const timestamp = new Date().getTime();
      const mimeType = blob.type;
        // 根据 MIME 类型获取文件扩展名
      const extension = this.getExtensionFromMimeType(mimeType);
      formData.append("file", blob,`jxt_${timestamp}.${extension}`); // 添加图片文件到表单数据中

      // 此时可以将 formData 对象提交到服务器进行上传
      const res = await upload(formData);
      if (res.code == 200) {
        console.log(res.data);
        if (this.smode === "tuw") {
          this.$parent.charts.push(res.data.url)
        } else {
          this.$parent.wineData.heiImage=res.data.url
        }
       
      }
    },
    // 根据 MIME 类型获取文件扩展名
    getExtensionFromMimeType(mimeType) {
      switch (mimeType) {
        case "image/jpeg":
          return "jpg";
        case "image/png":
          return "png";
        case "image/gif":
          return "gif";
        // 添加其他 MIME 类型的处理
        default:
          return "jpg"; // 默认为 jpg 扩展名
      }
    },

    upload() {
      // 实现重新上传的逻辑
    },
    finish() {
      // 实现确认裁剪的逻辑
      this.$refs.cropper.getCropBlob((blob) => {
        // this.loading = true;
        this.dialogVisible = false;
        this.previewImg = URL.createObjectURL(blob);
        this.isPreview = true;
        if (this.smode === "tuw") {
          this.$emit("croppedImage", this.previewImg);
        } else {
          this.$parent.imageUrl = this.previewImg;
        }
        // 在这里执行上传操作
        this.uploadImage(blob);
      });
    },
    // 从本地上传图片时调用的方法
    handleChangeUpload(file) {
      // 获取上传的图片文件
      const uploadedImg = file.raw;
      // 更新裁剪图片的地址
      this.$refs.cropper.img = URL.createObjectURL(uploadedImg);
      console.log(this.$refs.cropper.img);
    },
    realTime() {
      // 实现实时裁剪预览的逻辑
    },
  },
};
</script>

<style lang="scss" scoped>
.cropper-dialog {
  width: 90% !important;
}
.cropper-wrap {
  widows: 50%;
  height: 100%;
  display: flex;
  justify-content: start;
}
.cropper-content {
  .cropper {
    width: auto;
    height: 350px;
  }
}
.cropper-box {
}
.preview-title {
}
.preview-box {
}
.dialog-footer {
}
.preveiw-upload {
}
.preview-img {
}
.el-dialog {
  width: 90% !important;
  display: flex;
  width: 100%;
  justify-content: left;
  align-items: center;
}
</style>
